﻿
body
{
    font-family: arial, sans-serif;
    font-size: medium;
    width:1100px;
}

h1
{
     font-size: x-large;
    color: #FFFFFF;
    background-color: #000066;
    vertical-align: middle;
    text-align: left;
    text-indent: 20px;
    padding: 10px;
}
h2
{
    font-size:  large;
    color: #FFFFFF;
    background-color: #006699;
    vertical-align: middle;
    text-align: left;
    text-indent: 20px;
    padding: 10px;
}
h3
{
    font-size:  medium;
    color: #000000;
    background-color:  Silver;
    vertical-align: middle;
    text-align: left;
    text-indent: 20px;
    padding: 5px;
}
a
{
     background-color:White;
     color:Navy;
     text-decoration:none;
}
a:hover
{
    background-color:Navy;
     color:White;
      text-decoration:none;
}

img
{    
   background-color:transparent;    
}


.fret
{
    width:20px;
    height:20px;
    float:left;
    background-image:url('images/fret.png');
    vertical-align:middle;
    
}


.fretlabel
{
    width:20px;
    height:20px;
    float:left;
   text-align:center;
     font-family: arial, sans-serif;
  font-size: x-small;
  color:Navy;
 }


.open
{
    width:20px;
    height:20px;
    float:left;
    background-image:url('images/open.png');
    vertical-align:middle;
    
}

.silent
{
    width:20px;
    height:20px;
    float:left;
    background-image:url('images/silent.png');
    vertical-align:middle;
    
}

.string
{
position:relative;
clear:both;
}




.fret span {
  margin-left: -100000px;
  position: absolute;
}

.fret:hover span {
  text-align:center;
  font-size:medium;
  color:Navy;
  border-style:outset;
  border-color:Orange;
  border-width:2px;
  background-color:White;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 99;
  margin-left: 0;
  width: 40px;
}

.silent span {
  margin-left: -100000px;
  position: absolute;
}

.silent:hover span {
  text-align:center;
  font-size:medium;
  color:Navy;
  border-style:outset;
  border-color:Orange;
  border-width:2px;
  background-color:White;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 99;
  margin-left: 0;
  width: 40px;
}


.open span {
  margin-left: -100000px;
  position: absolute;
}

.open:hover span {
  text-align:center;
  font-size:medium;
  color:Navy;
  border-style:outset;
  border-color:Orange;
  border-width:2px;
  background-color:White;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 99;
  margin-left: 0;
  width: 40px;
}


.stringlabel
{
  font-size:small;
  color:Navy;
  width:60px;
  height:20px;
  float:left;
  vertical-align:middle;
}


.panel
{
    width:95%;
    border-width:thin;
    border-style:solid;
    border-color:Black;
    padding:10px;
    margin:10px;
    
}

.chordPanel
{
    height:250px;
    width:1000px;
    border-width:thin;
    border-style:solid;
    border-color:Black;
    padding:10px;
    margin:10px;
      
}

.panelLabel
{
  font-size:medium;
  color:Black;
  display:block;
  margin-top:5px;
  margin-bottom:5px;
}

.chordSymbol
{
position:relative;
top:20px;

}

.songDisplay
{
  
}

.errorText
{
    color:Red;
     font-weight:bold;
     font-family: arial, sans-serif;
      text-decoration:blink;
}

